<template>
  <div class="atd__side-menus">
    <div class="atd__logo">
      <img src="../../assets/logo@2x.png" alt="logo">
      <h3 v-if="!showTitle">{{$t('title')}}</h3>
    </div>
    <v-side-menu ref="sideMenus" :default-active="defaultActive" :default-openeds="['1']" router :collapse="collapse">
      <!-- <v-side-menu-item index="0" :route="{name: 'home'}"><i class="v-icon icon-home"></i>{{$t('menus.home')}}</v-side-menu-item> -->
      <v-side-submenu index="1">
        <template slot="title">
          <i class="v-icon icon-group-set"></i>
          <span slot="title">{{$t('menus.management.title')}}</span>
        </template>
        <v-side-menu-item-group>
          <v-side-menu-item index="1-1" :route="{name: 'lightApp'}">{{$t('menus.management.light_app')}}</v-side-menu-item>
        </v-side-menu-item-group>
      </v-side-submenu>
    </v-side-menu>
  </div>
</template>

<script>
import Routes from '@/router/routes';
import Emitter from '@/vuego/mixins/emitter';

// 第一期 暂时隐藏首页功能
const ROUTE_INDEX_MAP = {
  // home: '0',
  light_app: '1-1',
};

export default {
  name: 'AtdSideMenus',
  componentName: 'AtdSideMenus',
  mixins: [Emitter],
  data() {
    return {
      links: Routes,
      defaultActive: '-1',
      collapse: false,
      showTitle: false,
    };
  },
  mounted() {
    const getRouteIndex = () => {
      let routeName = this.$route.name;
      const parentRouteName = this.$route.path.split('/')[1];
      if (parentRouteName !== routeName) {
        routeName = parentRouteName;
      }
      return ROUTE_INDEX_MAP[routeName] || ROUTE_INDEX_MAP.light_app;
    };
    this.defaultActive = getRouteIndex();
    console.log(this.defaultActive);
    window.addEventListener('hashchange', () => {
      this.$refs.sideMenus.setMenuActive(getRouteIndex());
    }, false);

    this.$on('collapse-update', this.updateCollapseStatus);
  },
  methods: {
    updateCollapseStatus(val) {
      if (!val) {
        setTimeout(() => {
          this.showTitle = val;
        }, 300);
      } else {
        this.showTitle = val;
      }
      this.collapse = val;
    },
  },
};
</script>
